<template>
  <div class="view-wrapper">
    <div class="establishShop">
      <!-- 第一步 -->
      <div v-if="step==1">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
          <el-form-item label="注册手机号" prop="account">
            <el-input v-model.number="ruleForm.account" :style="{width: inputWidth}" placeholder="请输入注册手机号"
              maxlength="11">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading='sumitLoading'>下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 第二步 -->
      <div v-show="step==2">
        <StepTwo @previousStep="previousStep" @successFrom="successFromTwo"></StepTwo>
      </div>
      <!-- 第三步 -->
      <div v-show="step==3">
        <StepThree @previousStep="previousStepTwo" @successFrom="successFromThree"></StepThree>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    merchantCheckPhone,
    addMerchant
  } from "@/api/merchants";
  import StepTwo from "./components/stepTwo";
  import StepThree from "./components/stepThree.vue";
  export default {
    name: "",
    components: {
      StepTwo,
      StepThree
    },
    computed: {

    },
    data() {
      return {
        sumitLoading: false,
        step: 1, //步骤
        labelWidth: '100px',
        inputWidth: '300px',
        ruleForm: {
          account: '',
        },
        rules: {
          account: [{
            required: true,
            message: '请输入注册手机号',
            trigger: ['blur', 'change']
          }, ],
        },
        ruleFormTwo: {}, //第二步数据
        ruleFormThree: {}, //第三步数据
      }
    },

    created() {

    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sumitLoading = true
            var params = {
              phone: this.ruleForm.account,
            };
            merchantCheckPhone(params).then((res) => {
              if (res.code == 200) {
                this.step = 2
                this.sumitLoading = false
              }
            }).catch(() => {
              this.sumitLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 获取第二步数据
      successFromTwo(e) {
        console.log('第二步数据', e)
        this.ruleFormTwo = e
        this.step = 3
      },
      //第二步返回第一步
      previousStep() {
        this.step = 1
      },
      //第三步
      previousStepTwo() {
        this.step = 2
      },
      // 获取第三步数据
      successFromThree(e) {
        console.log('第三步数据', e)
        this.ruleFormThree = e
        this.sumitAdd()
      },
      sumitAdd() {
        this.$confirm('是否推送?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            ...this.ruleForm,
            ...this.ruleFormTwo,
            ...this.ruleFormThree
          }
          console.log(data)
          addMerchant(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$router.push({
                path: "/merchants/MerchantsList",
                query: {},
              });
            }
          }).catch(() => {

          })

        }).catch(() => {});
      },
    },
  };

</script>
<style scoped>
  .establishShop {
    padding: 20px 20px 10px;
    background: #fff;
    border-radius: 4px;
  }

</style>
